import React from 'react'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Checkbox	= $Lazy.load(()=>import('@antd/form/checkbox'))
const Image  	= $Lazy.load(()=>import('@antd/image'))
// ===================================================================== Temp
// ===================================================================== data
let list = [
	{ label:'满意', 					name:'1-1',  	line:'line_1',	index:1, 	group:'1' },
	{ label:'见宫颈管/移行区成份', 		name:'1-1-1',	line:'line_1_1',	index:1, 	type:'radio', flag:'1-1' },
	{ label:'未见宫颈管/移行区成份',		name:'1-1-2',	line:'line_1_1',	index:1, 	type:'radio', flag:'1-1' },
	
	{ label:'不满意', 					name:'1-2',	 	line:'line_1',	index:1, 	group:'1'},
	{ label:'上皮细胞数数量偏低', 		name:'1-2-1', 	line:'line_1_1',	index:1, 	type:'radio', flag:'1-2', disabled:true },
	{ label:'血液遮盖超过75%的鳞状细胞', name:'1-2-2', 	line:'line_1_1',	index:1, 	type:'radio', flag:'1-2', disabled:true },
	{ label:'炎性渗出物遮盖', 			name:'1-2-3',	line:'line_1_1',	index:1, 	type:'radio', flag:'1-2', disabled:true },
	
	{ label:'未见', 					name:'2-1', 	line:'line_2',	title:'TBS标准诊断'},
	
	// 一、无上皮内病变或恶性病变
	// 非肿瘤性发现
	{ label:'鳞状细胞化生', 				name:'3-1-1-1', line:'line_3',		index:3, t1:'1、非肿瘤性发现', t2:'(1) 非肿瘤性细胞学改变'},
	{ label:'角化性改变', 				name:'3-1-1-2', line:'line_3',	index:3},
	{ label:'输卵管化生', 				name:'3-1-1-3', line:'line_3',	index:3},
	{ label:'萎缩', 					name:'3-1-1-4', line:'line_3',	index:3},
	{ label:'妊娠相关性改变',	 		name:'3-1-1-5', line:'line_3',	index:3},
	// 反应性细胞改变与下述相关
	{ label:'炎症（包括典型的修复）', 	name:'3-1-2-1', line:'line_3',	index:3, t2:'(2) 反应性细胞改变与下述相关'},
	{ label:'放射治疗', 					name:'3-1-2-2', line:'line_3',	index:3},
	{ label:'宫内节育器（IUD）', 		name:'3-1-2-3', line:'line_3',	index:3},
	
	{ label:'子宫切除后是否有腺细胞', 		name:null, 	index:3, t2:'(3) 子宫切除后是否有腺细胞'},
	// 微生物病原体
	{ label:'滴虫', 						name:'3-2-1', line:'line_3',	index:3, t1:'2、微生物病原体'},
	{ label:'形态符合白色念珠菌', 			name:'3-2-2', line:'line_3',	index:3},
	{ label:'菌群失调，提示细菌性阴道病', 	name:'3-2-3', line:'line_3',	index:3},
	{ label:'形态符合放线菌的细菌', 			name:'3-2-4', line:'line_3',	index:3},
	{ label:'符合单纯疱疹病毒的细胞学改变', 	name:'3-2-5', line:'line_3',	index:3},
	{ label:'符合巨细胞病毒细胞学改变', 		name:'3-2-6', line:'line_3',	index:3},
	// { label:'子宫切除后是否有腺细胞', 		name:'3-2-7', line:'line_3',	index:3},
	// 微生物病原体
	{ label:'子宫内膜细胞（见于>=45岁女性）', name:'3-3-1', line:'line_3',	index:3, t1:'3、其他'},
	
	// 二、上皮细胞异常
	{ label:'非典型鳞状细胞', 					name:'4-1-1', 	line:'line_7',	index:4, 	group:'4-1', t1:'1、鳞状细胞' },
	{ label:'意义不明确（ASC-US）', 				name:'4-1-1-1',	line:'line_7_1',	index:4, 	type:'radio', flag:'4-1-1', disabled:true },
	{ label:'不除外高度鳞状上皮内病变(ASC-H)',	name:'4-1-1-2',	line:'line_7_1',	index:4, 	type:'radio', flag:'4-1-1', disabled:true },
	
	{ label:'低度鳞状上皮内病变(LSIL)\r（包含：HPV/轻度异型增生/CINI）', 			name:'4-1-2', 	line:'line_7',		index:4,  group:'4-1' },
	{ label:'高度鳞状上皮病变(H-SIL)\r（包含：中度及重度异型增生；CIN2及CIN3）', 	name:'4-1-3',	line:'line_7',		index:4,  group:'4-1' },
	{ label:'具有可能浸润的特点（若疑为浸润）',									name:'4-1-3-1',	line:'line_7_1',		index:4, 		type:'radio', flag:'4-1-3', disabled:true },
	
	{ label:'鳞状细胞癌（SCC）',					name:'4-1-4',	line:'line_7',	index:4, group:'4-1' },
	
	// 腺细胞
	{ label:'非典型腺细胞（AGC）', 					name:'4-2-1', 	line:'line_10',		index:4, 	group:'4-2', t1:'2、腺细胞' },
	{ label:'非典型腺细胞，子宫颈管细胞（非特异）', 	name:'4-2-1-1',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-1', disabled:true },
	{ label:'非典型腺细胞，子宫内膜细胞（非特异）',	name:'4-2-1-2',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-1', disabled:true },
	{ label:'非典型腺细胞（来源不确定）',				name:'4-2-1-3',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-1', disabled:true },
	
	{ label:'非典型腺细胞', 							name:'4-2-2', 	line:'line_10',	index:4, 	group:'4-2'},
	{ label:'典型子宫颈管腺细胞（AEC），倾向肿瘤', 	name:'4-2-2-1',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-2', disabled:true },
	{ label:'典型腺细胞（AGC），倾向肿瘤',			name:'4-2-2-2',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-2', disabled:true },
	
	{ label:'子宫颈管原位癌（AIS）', 				name:'4-2-3', 	line:'line_10',	index:4, 	group:'4-2'},
	
	{ label:'腺癌', 								name:'4-2-4', 	line:'line_10',	index:4, 	group:'4-2',},
	{ label:'子宫颈管腺癌', 							name:'4-2-4-1',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-4', disabled:true },
	{ label:'子宫内膜腺癌', 							name:'4-2-4-2',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-4', disabled:true },
	{ label:'子宫外腺癌', 							name:'4-2-4-3',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-4', disabled:true },
	{ label:'无分类', 								name:'4-2-4-4',	line:'line_10_1',	index:4, 	type:'radio', flag:'4-2-4', disabled:true },
]
const Content = ({data}, ref) => {
	
	const [ copyList, setCopyList ] = React.useState($fn.copy(list))
	
	React.useEffect(() => {
		let copy_list = $fn.copy(list)
		$fn.hasArray(data.forms_check_data) && data.forms_check_data.forEach(v => {
			const key = Object.keys(v)[0]
			const value = v[key]
			if($fn.isValid(value)){
				copy_list.forEach(v => {
					if (v.name === key) {
						v.value = true
					}
				})
			}else{
				copy_list.forEach(v => {
					if (v.name === key) {
						v.value = false
					}
				})
			}
		})
		setCopyList(copy_list)
	}, [data])
	
	const List = React.useCallback( flag =>{
		return (
			<div className='fv'>
				{
					copyList.map((v,i) => 
						(v.flag === flag || v.name === flag) && (
							<React.Fragment key={i}>
								{
									v.name === flag ? <Checkbox label={v.label} value={v.value} disabled={true} /> :
										(<div className="pl25">
											<Checkbox label={v.label} value={v.value} disabled={true} />
										</div>)
								}
							</React.Fragment>
						)
					)
				}
			</div>
		)
	},[copyList])
	
	return (
		<div className="fv ex">
			{ $fn.hasObject(data) && Object.keys(data).length !== 1 ?
				<>	
					{data.forms_check_data && (
						<div className="fv">
							<div className="fx pb5">
								<div className="fx ex">
									<div className="tr" style={{width: 100}}>标本质量：</div>
									{ List('1-1') }
								</div>
								<div className="ex">
									{ List('1-2') }
								</div>
							</div>
							<div className="fx pb5">
								<div className="tr" style={{width: 100}}>上皮细胞异常：</div>
								{ List('2-1') }
							</div>
							<div className="fx pb5">
								<div className="fv ex">
									<div className="fx pb5">
										<div className="tr" style={{width: 100}}>鳞状细胞：</div>
										<div className="fv">
											{ List('4-1-1') }
											{ List('4-1-2') }
											{ List('4-1-3') }
											{ List('4-1-4') }
										</div>
									</div>
									<div className="fx pb5">
										<div className="tr" style={{width: 100}}>微生物病原体：</div>
										<div className="fv">
											{ List('3-2-1') }
											{ List('3-2-2') }
											{ List('3-2-3') }
											{ List('3-2-4') }
											{ List('3-2-5') }
											{ List('3-2-6') }
										</div>
									</div>
									<div className="fx pb5">
										<div className="tr" style={{width: 100}}>非肿瘤性发现：</div>
										<div className="fv">
											{ List('3-1-1-1') }
											{ List('3-1-1-2') }
											{ List('3-1-1-3') }
											{ List('3-1-1-4') }
											{ List('3-1-1-5') }
											{ List('3-1-2-1') }
											{ List('3-1-2-2') }
											{ List('3-1-2-3') }
										</div>
									</div>
									<div className="fx pb5">
										<div className="tr" style={{width: 100}}>其他：</div>
										<div className="fv">
											{ List('3-3-1') }
										</div>
									</div>
								</div>
								<div className="fv ex">
									<div className="fx pb5">
										<div>腺细胞：</div>
										<div className="fv">
											{ List('4-2-1') }
											{ List('4-2-2') }
											{ List('4-2-3') }
											{ List('4-2-4') }
										</div>
									</div>
									<div className="fx">
										<div>镜下可见：</div>
										<div className="fv">
											{data.imgs?.map((v,i) => <Image key={i} className="mr5" src={'http://resource.norsonmed.com/img' + v} width={150} height={150} />)}
										</div>
									</div>
								</div>
							</div>
							<div className="fv">
								<div className="f14">判读意见/结果:</div>
								<div className="f12 b pb10">{data.result_proposal}</div>
							</div>
							<div className="fv">
								<div className="f14">附件/意见:</div>
								<div className="f12 b pb10">{data.suggest}</div>
							</div>
						</div>
					)}
					{data.naked_eye && (
						<>
							<div className="f14">肉眼所见:</div>
							<div className="f12 b pb10">{data.naked_eye}</div>
						</>
					)}
					{data.imgs?.length !== 0 && !data.forms_check_data && (
						<>
							<div className="f14">光镜所见:</div>
							<div className="fx pb10">
								{data.imgs?.map((v,i) => <Image key={i} className="mr5" src={'http://resource.norsonmed.com/img' + v} width={150} height={150} />)}
							</div>
						</>
					)}
					{data.pathological_diagnosis &&(
						<>
							<div className="f14">病理诊断:</div>
							<div className="f12 b pb10">{data.pathological_diagnosis}</div>
						</>
					)}
				</> :  <span className="tc pb50 pt50 b">暂无报告结果！</span> }
		</div>
	)
}

export default Content
// 同名历史记录增加 实验结果 2021-10-12 3:35:41 ?F10: PM? --伍智睿
